import { defineStore } from "pinia";
import { pick } from "lodash-es";
import { hub } from "../canvas/hub";
import { Layer } from "../canvas/System/Layer";
export type DataOfLayer = typeof DefaultLayerData;
const DefaultLayerData = {
    alpha: 1,
    id: "",
    name: "",
    visible: true,
    zIndex: 0,
    userLock: true,
    image: "",
    selected: false,
};

/** 在隐藏状态下更新时 进行缓存，打开时直接更新 */
const cachingLayer = new Set<Layer>();
export const useControllerStore = defineStore("controller", {
    state: () => {
        return {
            layers: {} as { [name: string]: DataOfLayer },
            show: { layer: true },
            selected: {
                layerID: [] as string[],
                multi: false,
            },
        };
    },
    getters: {
        selectedLayer(state) {
            return state.selected.layerID.map((i) => state.layers[i]);
        },
        sortedLayers(state) {
            return Object.values(state.layers).sort((a, b) => {
                return b.zIndex - a.zIndex;
            });
        },
    },

    actions: {
        /** 对内更新图层信息 */
        updateLayer(layer: Layer) {
            if (this.show.layer === false) {
                cachingLayer.add(layer);
                return;
            }
            const image = layer.createSnapshot();

            // console.log("更新");
            const infoOfLayer = pick(layer, [
                "id",
                "name",
                "userLock",
                "selected",
            ]);
            const infoOfG = pick(layer.g, ["alpha", "visible", "zIndex"]);

            const data = {
                ...infoOfG,
                ...infoOfLayer,
                image,
            };
            this.layers[layer.id] = data;
        },
        /** 对外更改图层信息 */
        changeLayerState(id: string, data: Partial<DataOfLayer>) {
            hub.emit("changeLayer", {
                id,
                data,
            });
        },
        /** 选中一个图层，可以选中多个 (this.selected.multi) */
        selectLayer(layerId: string) {
            if (this.selected.multi) {
                const index = this.selected.layerID.indexOf(layerId);
                if (index === -1) {
                    this.selected.layerID.push(layerId);
                } else {
                    this.selected.layerID.splice(index, 1);
                }
            } else {
                this.selected.layerID = [layerId];
            }
            hub.emit("selectLayer", this.selected.layerID);
        },
        /** 删除一个图层 */
        deleteLayer(layer: DataOfLayer) {
            hub.emit("deleteLayer", layer);
            delete this.layers[layer.id];
        },

        /** from 和 to 都是数组的 index ，不是zIndex */
        updateLayerIndex(from: number, to: number) {
            const sorted = this.sortedLayers;
            const target = sorted[to].zIndex;
            if (from - to > 0) {
                // 往后走
                this.changeLayerState(sorted[from].id, { zIndex: target - 1 });
            } else {
                // 往前走
                this.changeLayerState(sorted[from].id, { zIndex: target + 1 });
            }
        },
        toggleController() {
            this.show.layer = !this.show.layer;
            if (this.show.layer) {
                cachingLayer.forEach((i) => {
                    this.updateLayer(i);
                });
                console.log(cachingLayer);
                cachingLayer.clear();
            }
        },
    },
});
